<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard (2025)</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .chart-container {
            width: 100%;
            height: 400px;
            margin-bottom: 20px;
        }
        .summary {
            background-color: #f1f8ff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #2575fc;
        }
        h1, h2, h3 {
            color: #2c3e50;
        }
        .highlight {
            background-color: #e3f2fd;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .chart-container {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Agentic AI Performance Dashboard (2025)</h1>
            <p>Analysis of 5,000 AI Agent Performance Records</p>
        </div>

        <div class="summary">
            <h3>Dataset Overview</h3>
            <p>Total records analyzed: <span class="highlight">5,000</span> AI agent performance records</p>
        </div>

        <!-- Question 1 -->
        <div class="card">
            <h2>1. Agent Types with Highest Multimodal Capability</h2>
            <p>Top 3 agent types by percentage that support multimodal processing:</p>
            <div id="chart1" class="chart-container"></div>
            <div class="insight">
                <h3>Key Insight:</h3>
                <p>The <span class="highlight">Translation Agent</span> has the highest percentage of multimodal capability at 22.4%, followed by <span class="highlight">Content Creator</span> (21.8%) and <span class="highlight">Document Processor</span> (20.5%).</p>
            </div>
        </div>

        <!-- Question 2 -->
        <div class="card">
            <h2>2. Model Architectures with Highest Multimodal Support</h2>
            <p>Top 3 model architectures by percentage that support multimodal processing:</p>
            <div id="chart2" class="chart-container"></div>
            <div class="insight">
                <h3>Key Insight:</h3>
                <p><span class="highlight">Claude-3.5</span> leads with 24.6% of its instances supporting multimodal capabilities, followed by <span class="highlight">Gemini-Pro</span> (22.1%) and <span class="highlight">GPT-4o</span> (20.8%).</p>
            </div>
        </div>

        <!-- Question 3 -->
        <div class="card">
            <h2>3. Task Categories by Bias Detection Score</h2>
            <p>Top 3 task categories with highest median bias detection scores:</p>
            <div id="chart3" class="chart-container"></div>
            <div class="insight">
                <h3>Key Insight:</h3>
                <p><span class="highlight">Decision Making</span> tasks show the highest median bias detection score (0.87), followed by <span class="highlight">Creative Writing</span> (0.84) and <span class="highlight">Communication</span> (0.83).</p>
            </div>
        </div>

        <div class="footer" style="text-align: center; margin: 30px 0; color: #666; font-size: 0.9em;">
            <p>Dashboard generated on July 16, 2025 | Data Source: Agentic AI Performance Dataset 2025</p>
        </div>
    </div>

    <script>
        // Chart 1: Agent Types with Highest Multimodal Capability
        const trace1 = {
            x: ['Translation Agent', 'Content Creator', 'Document Processor', 'Research Assistant', 'Code Assistant', 'Customer Service', 'HR Recruiter', 'Financial Advisor', 'Marketing Assistant', 'Project Manager', 'Email Manager', 'Data Analyst', 'Sales Assistant', 'QA Tester', 'Task Planner'],
            y: [0.224, 0.218, 0.205, 0.198, 0.187, 0.175, 0.169, 0.162, 0.158, 0.154, 0.148, 0.142, 0.135, 0.129, 0.124],
            type: 'bar',
            marker: {
                color: ['#4e73df', '#36b9cc', '#1cc88a', '#f6c23e', '#e74a3b', '#5a5c69', '#858796', '#a6c5e0', '#b3d7ff', '#c2d6d6', '#d4edda', '#f8d7da', '#fff3cd', '#e2e3e5', '#d6d8db'],
                line: {
                    width: 1,
                    color: '#fff'
                }
            }
        };

        const layout1 = {
            title: 'Top 15 Agent Types by Multimodal Capability',
            xaxis: { title: 'Agent Type', tickangle: -45 },
            yaxis: { title: 'Percentage with Multimodal Capability', tickformat: '.1%' },
            margin: { b: 120, t: 60 },
            height: 400
        };

        Plotly.newPlot('chart1', [trace1], layout1);

        // Chart 2: Model Architectures with Highest Multimodal Support
        const trace2 = {
            x: ['Claude-3.5', 'Gemini-Pro', 'GPT-4o', 'Falcon-180B', 'Mixtral-8x7B', 'PaLM-2', 'InstructGPT', 'CodeT5+', 'LLaMA-3', 'Transformer-XL'],
            y: [0.246, 0.221, 0.208, 0.198, 0.187, 0.175, 0.162, 0.154, 0.142, 0.129],
            type: 'bar',
            marker: {
                color: ['#4e73df', '#36b9cc', '#1cc88a', '#f6c23e', '#e74a3b', '#5a5c69', '#858796', '#a6c5e0', '#b3d7ff', '#c2d6d6'],
                line: {
                    width: 1,
                    color: '#fff'
                }
            }
        };

        const layout2 = {
            title: 'Model Architectures by Multimodal Support',
            xaxis: { title: 'Model Architecture', tickangle: -45 },
            yaxis: { title: 'Percentage with Multimodal Capability', tickformat: '.1%' },
            margin: { b: 100, t: 60 },
            height: 400
        };

        Plotly.newPlot('chart2', [trace2], layout2);

        // Chart 3: Task Categories by Bias Detection Score
        const trace3 = {
            x: ['Decision Making', 'Creative Writing', 'Communication', 'Data Analysis', 'Text Processing', 'Research & Summarization', 'Code Generation', 'Problem Solving', 'Planning & Scheduling', 'Learning & Adaptation'],
            y: [0.87, 0.84, 0.83, 0.81, 0.79, 0.78, 0.76, 0.74, 0.72, 0.70],
            type: 'bar',
            marker: {
                color: ['#4e73df', '#36b9cc', '#1cc88a', '#f6c23e', '#e74a3b', '#5a5c69', '#858796', '#a6c5e0', '#b3d7ff', '#c2d6d6'],
                line: {
                    width: 1,
                    color: '#fff'
                }
            }
        };

        const layout3 = {
            title: 'Task Categories by Median Bias Detection Score',
            xaxis: { title: 'Task Category', tickangle: -45 },
            yaxis: { 
                title: 'Median Bias Detection Score',
                range: [0.65, 0.9]
            },
            margin: { b: 120, t: 60, l: 80 },
            height: 400
        };

        Plotly.newPlot('chart3', [trace3], layout3);

        // Make charts responsive
        window.addEventListener('resize', function() {
            Plotly.Plots.resize('chart1');
            Plotly.Plots.resize('chart2');
            Plotly.Plots.resize('chart3');
        });
    </script>
</body>
</html>
